<template>
	<div class="packed-div">
		<!--头部导航-->
		<div class='header-div white_bg padding10'>
			<div class='flex flex-left' @click='chooseBatch'>
				<span class='iconfont icon-piliang'></span>
				<span>{{batchOpera? '取消': '批量'}}</span>
			</div>
			<div class='flex flex-right' @click='showDrawer'>
				<span>筛选</span>
				<span class='iconfont icon-xiala'></span>
			</div>
		</div>
		<!--头部筛选-->
		<div class="filter white_bg padding10">
			<span>共{{recordNum}}条记录</span>
		</div>
		
		<!--无待打包裹记录-->
		<div class='norecord' v-if='recordList.length==0'>
			<span class='iconfont icon-baoguo'></span>
			<p>无待打包裹</p>
		</div>
		
		<!--有打印记录-->
		<div class='records-div' v-if='recordList.length>0'>
			<ul>
				<li class='white_bg margin_top30 padding10'
					v-for='(item,i,k) in recordList' :key='k'>
					<p class='ctime'>
						<radio :checked="item.checked" color='#F65A4B'
							@click.stop='chooseRadio(i)' v-show='batchOpera'/>
						<span>{{item.ctime}}</span>
					</p>
					<div class='content-div'>
						<!--收-->
						<div class='shou-div'>
							<p class='user-info flex'>
								<span class='flex tip'>
									<span class='txt shou'>收</span>
									<span>{{item.receive.name}}</span>
								</span>
								<span>{{item.receive.tele}}</span>
							</p>
							<p class='addr flex'>{{item.receive.addr}}</p>
							<p class='detail flex'>{{item.receive.detail}}</p>
							<p class='remark flex'>
								<span class='remark_txt'>{{item.receive.remark}}</span>
								<span class='iconfont' :class="[item.expand? 'icon-shang': 'icon-xiala']" 
									@click.stop='expandDetail(i)'></span>
							</p>
						</div>
						<div class='expand-div' v-show='item.expand'>
							<!--寄-->
							<div class='ji-div'>
								<p class='user-info flex'>
									<span class='flex tip'>
										<span class='txt ji'>寄</span>
										<span>{{item.send.name}}</span>
									</span>
									<span>{{item.send.tele}}</span>
								</p>
								<p class='addr flex'>{{item.send.addr}}</p>
								<p class='detail flex'>{{item.send.detail}}</p>
							</div>
							<!--包裹信息-->
							<div class='package-info-div'>
								<p class='flex'>
									<span class='p_name'>包裹ID：</span>
									<span class='num'>{{item.ID}}</span>
								</p>
								<p class='flex'>
									<span class='p_name'>运单号：</span>
									<span>{{item.singleNum || "未获取，打印时获取"}}</span>
								</p>
								<p class='flex'>
									<span class='p_name'>创建人：</span>
									<span>{{item.cName}}</span>
								</p>
							</div>
						</div>
					</div>
					<!--按钮组-->
					<div class='btn-div flex'>
						<span class='print' @click='deletePendingPackage(i)'>删除</span>
						<span class='print' @click='printExpressDelivery(i)'>打印快递单</span>
					</div>
				</li>
			</ul>
		</div>
		
		<!--抽屉-->
		<uni-drawer :visible="false" mode='right' ref='myDrawer'>
			<view class='box'>
				<view class="chosen_limit">
					<ul>
						<li>
							<input type="text" v-model='keyword' placeholder="输入包裹ID" />
						</li>
						<li>
							<span class='timetip'>开始时间：</span>
							<picker 
							    :value="startTime.value" mode='date'
								:end="startTime.end"
							    @change='toChangeDate'
							    data-type='1'>
							    <span class="picker">
									{{startTime.value||'请选择'}}
									<span class='iconfont icon-you'></span>
								</span>
							</picker>
						</li>
						<li>
							<span class='timetip'>结束时间：</span>
							<picker 
							    :value="endTime.value" mode='date'
								:start="endTime.start"
							    :end="endTime.end" @change='toChangeDate'
							    data-type='2'>
							    <span class="picker">
									{{endTime.value||'请选择'}}
									<span class='iconfont icon-you'></span>	
								</span>
							</picker>
						</li>
					</ul>
				</view>
				<div class='btn-group flex'>
					<span class='reset' @click='clearFilter'>清空筛选条件</span>
					<span class='confirm' @click='confirmFilter'>完成</span>
				</div>
			</view>
		</uni-drawer>
		
		<!--底部操作-->
		<div class='footer-div' v-show='batchOpera'>
			<div class='chosen flex'>
				<radio :checked="allChosen" color='#F65A4B'
					@click.stop='chosenAllRecord'/>
				<span>{{allChosen? '取消': '全选'}}</span>
			</div>
			<div class='print flex' @click='printExpressDelivery'>批量打印</div>
			<div class='delete flex' @click.stop='deletePendingPackage'>删除</div>
		</div>
	</div>
</template>

<script>
import uniDrawer from "../../components/uni-drawer.vue"
import {numberDouble,post,showToast} from '../../utils/index.js';
import {getPendingPackageUrl,deletePendingPackageUrl} from '../../config.js';
import {mapGetters} from 'vuex';
export default {
	data() {
		return {
			recordNum: 0,  //记录条数
			recordList: [],  //打印记录
			keyword: '',  //关键词
			startTime: {
			    value: '',  //初始值
			    end: ''  //最大值
			},
			endTime: {
			    value: '',  //默认值
			    start: '',   //开始值
			    end: ''  //最大值
			},
			printType: 1,  //已打包裹：1|打印记录：2
			currentPage: 1,  //当前页码
			nomore: false,  //没有更多
			chosenIndex: -1,  //选择删除的待打包裹
			batchOpera: false,  //是否批量操作
			allChosen: false,  //全选
		};
	},
	mounted(){
		this.initTime();
		this.getRecordList();
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	components: {
		uniDrawer
	},
	methods: {
		//初始化时间
		initTime(){
			var nowTime = new Date();
			var theYear = nowTime.getFullYear();
			var theMonth = numberDouble(nowTime.getMonth()+1);
			var theDay = numberDouble(nowTime.getDate());
			this.startTime = {
				//value: (theYear-1)+'-'+theMonth+'-'+theDay,
				end: theYear+'-'+theMonth+'-'+theDay
			};
			this.endTime = {
				//value: theYear+'-'+theMonth+'-'+theDay,
				start: (theYear-1)+'-'+theMonth+'-'+theDay,
				end: theYear+'-'+theMonth+'-'+theDay
			};
		},
		//初始化数据
		initData(){
			this.clearFilter();
			this.hideDrawer();
			this.recordNum = 0;
			this.recordList = [];
			this.currentPage = 1;
			this.nomore = false;
		},
		//清除筛选条件
		clearFilter(){
			this.startTime.value = '';
			this.endTime.value = '';
			this.keyword = '';  //关键词
		},
		//改变日期
		toChangeDate(e){
		    var type = e.target.dataset.type;
		    var value = e.target.value;  //选择的时间值
		    if(type==1){  //开始时间
		        this.startTime.value = value;
		        this.endTime.start = value;
		    }else{   //点击的结束时间
		        this.endTime.value = value;
		        this.startTime.end = value;
		    };
		},
		//搜索条件
		confirmFilter(){
			if(this.startTime.value || this.endTime.value || this.keyword){
				this.hideDrawer();
				this.recordNum = 0;
				this.recordList = [];
				this.currentPage = 1;
				this.nomore = false;
				this.getRecordList();
			}else{
				showToast('请添加搜索条件');
			}
		},
		//显示筛选抽屉
		showDrawer(){
			this.$refs.myDrawer.show();
		},
		//隐藏筛选抽屉
		hideDrawer(){
			this.$refs.myDrawer.close();
		},
		//点击展开寄件人详情信息
		expandDetail(index){
			this.recordList[index].expand = !this.recordList[index].expand;
		},
		//点击大类
		clickSort(type){
			this.printType = type;
		},
		//删除待打包裹
		deletePendingPackage(index){
			this.chosenIndex = index;
			var self = this;
			let content,tmpObj,IDArr;
			if(Object.prototype.toString.call(index)=='[object Number]'){  //单选
				content = '确定删除包裹？';
				tmpObj = {
					session_token: self.userInfo.session_token,
					IDArr: [self.recordList[self.chosenIndex].ID]
				};
			}else{
				IDArr = [];
				self.recordList.map((item,i)=>{
					if(item.checked){
						IDArr.push(item.ID);
					}
				});
				if(IDArr.length==0){
					showToast('请先选择要删除的包裹');
					return;
				};
				content = '确定所选删除包裹？';
				tmpObj = {
					session_token: self.userInfo.session_token,
					IDArr: IDArr
				};
			};
			uni.showModal({
				title: '提示',
				content: content,
				success(res){
					if(res.confirm){
						//删除待打包裹
						post(deletePendingPackageUrl, tmpObj)
						.then((res)=>{
							if(res.code==200){
								showToast('删除成功','success');
								if(Object.prototype.toString.call(index)=='[object Number]'){  //单选
									self.recordList.splice(self.chosenIndex,1);
								}else{
									self.recordList = self.recordList.filter((item,i)=>{
										return IDArr.indexOf(item.ID)==-1;
									});
								};
								self.$forceUpdate();
							}else{
								showToast(res.errMsg);
							}
						});
					}
				}
			});
		},
		//打印快递单
		printExpressDelivery(index){
			this.chosenIndex = index;
			let self = this;
			showToast('该函数未完成，等待去做...');
		},
		//获取包裹列表
		getRecordList(){
			var self = this;
			if(this.nomore){  //不能加载更多
				showToast('没有更多');
			    return;
			};
			var tmpObj = {
				session_token: self.userInfo.session_token,
				page: self.currentPage
			};
			if(self.startTime.value){
				tmpObj.startTime = self.startTime.value;
			};
			if(self.endTime.value){
				tmpObj.endTime = self.endTime.value;
			};
			if(self.keyword.trim()){
				tmpObj.keyword = self.keyword.trim();
			}
			post(getPendingPackageUrl, tmpObj)
			.then((res)=>{
			    //console.log(res);
				if(res.code==200){
					var data = res.data;
					var pages = data.page_count;
					var listData = data.list;
					if(listData.length==0){
					    showToast('没有更多');
					}else{
						self.recordNum = data.total;  //总记录条数
						listData.map((item,i)=>{
							item.checked = false;  //未选中
							item.expand = false;  //是否展开
						});
					    self.recordList = [...self.recordList, ...listData];
					    self.currentPage++;
					    if(self.currentPage > pages){
					        self.nomore = true;
					    }
					    self.$forceUpdate();
					}
				}else{
					showToast(res.errMsg);
				};
			});
		},
		//选择批量操作
		chooseBatch(){
			this.batchOpera = !this.batchOpera;
			if(this.batchOpera){  //批量操作
				this.allChosenOrCancel(false);
				this.allChosen = false;
			}
		},
		//全部选中/取消
		allChosenOrCancel(chosen=false){
			this.recordList.map((item,i)=>{
				item.checked = chosen;
			});
		},
		//点击全选按钮
		chosenAllRecord(){
			this.allChosen = !this.allChosen;
			if(this.allChosen){
				this.allChosenOrCancel(true);
			}else{
				this.allChosenOrCancel(false);
			}
		},
		//点选多项选
		chooseRadio(index){
			this.recordList[index].checked = !this.recordList[index].checked;
		},
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.initData();
		this.getRecordList();
	},
	onReachBottom() {
		this.getRecordList();
	}
}
</script>

<style lang="less">
@import '../../style/default.less';
.packed-div{
	padding-bottom:  120upx;
}
/*头部导航信息*/
.header-div{
	display: flex;
	height: 70upx;
	align-items: center;
	justify-content: space-between;
	.flex{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.flex-left{
		span.iconfont{
			font-size: 50upx;
			color: #999;
		}
	}
	.flex-right{
		justify-content: flex-end;
		span.iconfont{
			font-size: 50upx;
		}
	}
}
/*头部筛选*/
.filter{
	height: 60upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #eee;
	.flex-right{
		display: flex;
		align-items: center;
		span.icon-xiala{
			font-size: 40upx;
		}
	}
}
/*无打印记录*/
.norecord{
	text-align: center;
	margin-top: 20%;
	.iconfont{
		font-size: 200upx;
		color: #999;
	}
	p{
		color: #999;
		font-size: 28upx;
	}
}
/**抽屉**/
.box{
	position: relative;
	height: 100%;
	padding:30upx;
	box-sizing: border-box;
	.chosen_limit{
		font-size:24upx;
		ul{
			li{
				min-height: 70upx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				span.timetip{
					min-width: 140upx;
				}
				picker{
					flex:1;
					text-align: right;
				}
			}
		}
	}
	.flex{
		display: flex;
		align-items: center;
	}
	/**按钮组**/
	.btn-group{
		width: 100%;
		height: 70upx;
		justify-content: space-around;
		text-align: center;
		position: absolute;
		bottom: 80upx;
		left:0;
		span{
			padding:10upx 16upx;
			border-radius: 10upx;
			color: #fff;
		}
		span.reset{
			background: #007AFF;
		}
		span.confirm{
			background: @mainColor;
		}
	}
}
/*待打包裹*/
.records-div{
	ul{
		li{
			p.ctime{
				line-height: 60upx;
				border-bottom: 1px solid #e5e5e5;
				color: #666;
			}
			.flex{
				display: flex;
				align-items: center;
			}
			/*详细信息区域*/
			.content-div{
				.shou-div,.ji-div,.package-info-div{
					padding: 10upx;
					background: #f5f5f5;
					box-shadow:0 0 10upx #fff;
				}
				.user-info{
					justify-content: space-between;
					height: 50upx;
					.tip{
						span.txt{
							font-size: 32upx;
							display: inline-block;
							height: 40upx;
							line-height: 40upx;
							width: 40upx;
							border-radius: 50%;
							text-align: center;
							margin-right: 10upx;
							&.shou{
								color: @mainColor;
								border: 1px solid @mainColor;
							}
							&.ji{
								color: #007AFF;
								border: 1px solid #007AFF;
							}
						}
					}
				}
				.addr,.detail,.remark{
					min-height: 60upx;
				}
				.remark{
					justify-content: space-between;
				}
				//扩展开的盒子
				.expand-div{
					/*包裹信息*/
					.package-info-div{
						border-top: 1px solid #e5e5e5;
						.p_name{
							color: #999;
						}
						span.num{
							font-size: 24upx;
						}
					}
				}
			}
			/**按钮组**/
			.btn-div{
				height: 80upx;
				justify-content: space-between;
				span.print{
					color: @mainColor;
					border: 1px solid @mainColor;
					padding: 8upx 16upx;
					border-radius: 16upx;
				}
			}
		}
	}
}
/**底部操作**/
.footer-div{
	height: 100upx;
	width: 100%;
	position: fixed;
	z-index: 5;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	background: #fff;
	.flex{
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.delete{
			background: @mainColor;
			color: #fff;
		}
		&.print{
			background: #f86000;
			color: #fff;
		}
	}
}
</style>
